<template>
	<!-- 
		安全密码
		接受的值：
			value：从父组件传过来的密码
			textColor: 文字颜色改变
	-->
	<view class="equipmentCode">
		<view class="Remaining">
			<text :style="{color:props.textColor}">安全密码</text>
			<!-- <text class="greenColor">剩余80台</text> -->
		</view>
		<van-field id="pass" v-model="SecurityValue" :type="pwd? 'password':'text'" placeholder="请输入密码"
			@click-right-icon='Show' @input="changeValue">
			<template #right-icon>
				<van-icon v-if="pwd" name="eye-o" color="#848496" size='20' />
				<van-icon v-else name="closed-eye" color="#848496" size='20' />
			</template>
		</van-field>
		<view class="ForgotPassword" style="float: right;color: red;margin-top: 10px;">忘记密码?</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, defineEmits } from 'vue'
	// import { useStore } from 'vuex'
	// const store = useStore()
	const props = defineProps({
		value: String,
		textColor: String
	})
	const emit = defineEmits(['changeSecurityCode'])
	let SecurityValue = props.value // 将传过来的值转存一下
	const pwd = ref<boolean>(true) // 控制密码的显示

	const Show = () => {
		pwd.value = !pwd.value
	}
	// 改变输入框里面的值传给父组件
	const changeValue = () => {
		// console.log(e)
		// console.log(SecurityValue)
		emit('changeSecurityCode', SecurityValue)
	}
</script>

<style lang="scss" scoped>
	/* ::v-deep .van-notify {
		border: none !important;
	} */

	::v-deep #pass {
		text-align: left !important;
	}

	::v-deep .van-field {
		height: 88px;
		background: rgba(255, 255, 255, 0.10);
		border: 2px solid rgba(255, 255, 255, 0.6);
		border-radius: 16px;
		color: #fff;
	}

	::v-deep .van-field__control {
		color: #fff !important;
		line-height: 66px !important;
		text-align: center;
	}

	.equipmentCode {
		width: 91%;
		margin: 40px auto 0 auto;
		color: #fff;
		font-size: 24px;

		.Remaining {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin: 0 0 16px 0;

			.greenColor {
				color: rgba(0, 208, 185, 1);
			}
		}

		.steep {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			--van-stepper-input-font-size: 28px
		}
	}
</style>